<!DOCTYPE html>
<!--加这个标签以后才可以对model模型进行解析-->
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>社区名字</title>
    <link href="/css/editormd.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link href="/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="/css/commnuity.css" rel="stylesheet">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="/js/community.js" type="text/javascript"></script>
    <script src="/js/editormd.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 导航栏的引用 -->
<div th:insert="~{navigation :: nav}"></div>

<nav class="navbar navbar-default">
    <div class="container-fluid" id="left_main">
        <div class="row">
            <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
                <h3><span aria-hidden="true" class="glyphicon glyphicon-plus"></span>发起</h3>
                <hr>
                <form action="/publish" method="post">
                    <input name="id" th:value="${id}" type="hidden">
                    <!--                    问题标题-->
                    <div class="form-group" >
                        <label for="title">问题标题（简单扼要）：</label>
                        <input class="form-control" id="title" name="title" placeholder="问题标题" th:value="${title}"
                               type="text">
                    </div>
                    <!--                问题补充-->
                    <div class="form-group"  id="question-editor">
                        <label for="title">问题补充（必填，请参照右侧提示）：</label>
                        <textarea class="form-control" cols="30" id="description"
                                  name="description" rows="10"  style="display:none;"
                                  th:text="${description}"></textarea>
                    </div>
                    <script type="text/javascript">
                        $(function() {
                            var editor = editormd("question-editor", {
                                width  : "100%",
                                height : "400px",
                                path   : "/js/lib/",
                                delay  : 0,
                                /* 关闭实时预览 */
                                watch : false,
                                placeholder : "请在这里输入您的问题!", /* 编辑器灰色提示内容 */
                                imageUpload    : true,
                                imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                                imageUploadURL : "/file/upload",
                            });
                        });
                    </script>
                    <!--                添加标签-->
                    <div class="form-group">
                        <label for="title">添加标签：</label>
                        <input autocomplete="off" th:value="${tag}" class="form-control" id="tag" onclick="showSelectTag()" name="tag"
                               placeholder="输入标签，以，（逗号）分隔开" type="text"/>
                        <!-- 选择标签开始 -->
                        <div id="select-tag">
                            <!-- 标签页导航 -->
                            <ul class="nav nav-tabs" role="tablist">
                                <li  role="presentation" th:each="tagItem,tagStat :${tags}"  th:class="${tagStat.index == 0} ? 'active' : '' ">
                                    <a data-toggle="tab" th:href="${'#'+tagItem.tagId}"
                                       role="tab" th:text="${tagItem.categoryName}"  th:aria-controls="${tagItem.tagId}" ></a>
                                </li>

                            </ul>
                            <!-- 标签页内容 fade in active-->
                            <div class="tab-content">
                                <div class="tab-pane "
                                     th:class="${tagItem.getCategoryName().equals('开发语言')} ? 'tab-pane active' : 'tab-pane' "
                                     th:each="tagItem,tagStat :${tags}"
                                     th:id="${tagItem.tagId}" role="tabpanel">
                                    <span th:each="tagSpan,tagStat :${tagItem.getTags()}"
                                          class="label label-info tag_span"><span
                                            class="glyphicon glyphicon-tags"></span><span th:text="${tagSpan}"
                                                                                          class="label label-info"
                                                                                          th:onclick="selectTag([[${tagSpan}]]);"
                                                                                        >Spring</span></span>
                                </div>
                            </div>
                        </div>
                        <!-- 选择标签结束 -->
                        <!--/*@thymesVar id="user" type="ch"*/-->
                        <div th:if="${session.user != null}">
                            <input class="form-control" name="gitUser" th:value="${session.user.getName()}"
                                   type="hidden"/>
                        </div>
                    </div>

                    <button class="btn btn-success btn-publish" type="submit">提交</button>
                    <div  th:if="${error != null}" style="margin: 20px auto auto;">
                        <span class="alert alert-danger" th:text="${error}"></span>
                    </div>
                </form>

            </div>

            <div class="col-lg-3 .col-md-12 .col-sm-12 .col-xs-12">
                <h3>问题发起指南</h3>
                <dl>
                    <dt>问题标题：</dt>
                    <dd>&nbsp请用精简的语言描述发布您的问题，不超过25个值字</dd>
                    <dt>问题补充：</dt>
                    <dd>详细补充您的问题内容，并确保问题描述情绪直观，并提供一些相关的资料</dd>
                    <dt>选择标签：</dt>
                    <dd>选择一个或者多个适合的标签，用逗号隔开，每个标签不超过10个字</dd>
                </dl>
            </div>
        </div>
    </div>
</nav>
<!-- 页尾部分引用 -->
<div class="footer" th:insert="~{footer :: foot}"></div>
</body>
</html>